import React, { useEffect, useRef, useState } from 'react'
import api from '@/api'
import '../assets/style/login.css'
import {Form,Input,Button,message} from 'antd'
import {UserOutlined,UnlockOutlined,MailOutlined} from '@ant-design/icons'
import withRouter from '@/hoc/withRouter'
function Login(props) {
  //useState区域
  const [loginPic,setLoginPic]=useState({})
  const [validateCode,setValidateCode]=useState({})
  //useRef区域
  const containerRef=useRef()
  //组件加载完毕之后调用
  useEffect(()=>{
    getLoginPic()
    getValidateCode()
  },[])
  //获取首页图片的API
  const getLoginPic=async()=>{
    const result=await api.login.getLoginPicApi()
    setLoginPic(result.data)
    containerRef.current.style.backgroundImage=`url("${result.data.backgroundImage}")`
  }
  //获取验证码
  const getValidateCode=async()=>{
    const result=await api.login.validateCodeApi()
    setValidateCode(result.data)
  }
  //登录的方法
  const login=async(arg)=>{
    console.log('arg',arg);
    console.log('key',validateCode.key);
    const result=await api.login.loginApi({...arg,key:validateCode.key})
    console.log('result',result);
    if(result.code==200){
      message.success('登录成功')
      //将token保存到localStorage中
      localStorage.setItem('token',result.data.token)
      props.nav('/',{replace:true})
    }
  }

  
 
  return (
    <div className='login-container' ref={containerRef}>
      <div className="login-box">
        <div className='box-left'>
          {loginPic.banner?<img src={loginPic.banner[0].pic}/>:<></>}
        </div>
        <div className='box-right'>
          <div className='logo-container'>
            <img src={loginPic.loginLogo} className='logo' />
          </div>
          <div className='form-container'>
             <Form onFinish={login}>
                <Form.Item
                  name="account"
                  rules={[
                    {
                      required:true,
                      message:'用户名不能为空'
                    }
                  ]}>
                    <Input prefix={<UserOutlined />} placeholder='用户名' className='input'/>
                </Form.Item>
                <Form.Item
                  name="pwd"
                  rules={[
                    {
                      required:true,
                      message:'密码不能为空'
                    }
                  ]}>
                    <Input.Password prefix={<UnlockOutlined />} placeholder='用户名' className='input'/>
                </Form.Item>
                <Form.Item
                   name="code"
                   rules={[
                     {
                       required:true,
                       message:'验证码不能为空'
                     }
                   ]}
                   style={{
                    display: 'inline-block'
                   }}>
                    <Input prefix={<MailOutlined />} placeholder='验证码' style={{width:'300px',height:'40px'}}/>
                </Form.Item>
                <Form.Item
                 style={{
                  display: 'inline-block'
                 }}>
                  <img src={validateCode.code} style={{verticalAlign:'middle'}}  onClick={getValidateCode}/>
                </Form.Item>
                <Form.Item>
                    <Button type='primary' className='loginbtn' htmlType='submit'>登录</Button>
                </Form.Item>
             </Form>
          </div>
        </div>
      </div>
    </div>
  )
}
export default withRouter(Login)
